<template>
    <slot></slot>
    <div @mousedown="mousedown" class="resizer" :style="{ left: leftRef }" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import $ from "jquery";

const { direction, id, w } = defineProps(['direction', 'id', 'w'])

function mousedown(e) {
    e.preventDefault()
    e.stopPropagation()


    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)
}
function handleMouseMove({ x, toElement: e }) {
    if (e.classList[0] == 'resizer') e.style.background = '#2065f930'
    let area = window.innerWidth / 2.1
    let _obj = {
        left: Math.min(window.innerWidth - x, area),
        right: Math.min(x, area)
    }
    let newWidth = _obj[direction]
    $(`#${id}`).css('width', newWidth + 'px')
    done()
}
function handleMouseUp() {
    $('.resizer').css('background', '')
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
}


const leftRef = ref(0)
function done() {
    let slotDom = $(`#${id}`);
    let _obj = {
        left: slotDom.offset().left - w,
        right: slotDom.width()
    }
    leftRef.value = _obj[direction] + 'px'
}
onMounted(() => {
    $(`#${id}`).css('margin-' + direction, w)
    done()
})
</script>

<style scoped>
.resizer {
    width: v-bind("w + 'px'");
    height: 100%;
    position: fixed;
    cursor: col-resize;

    &:hover {
        background-color: #2065f930;
    }
}
</style>